<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <style>
    
        table,td,th{
            border: 1px solid #000;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <form class="form-inline">
                <label class="sr-only">请输入品牌名称</label>
                <input type="text" v-model="brandName" class="form-control"  placeholder="品牌名称">

            <button class="btn btn-default" @click.prevent="add">添加</button>
            <br>
            <br>
            <label class="sr-only">请输入搜索关键字</label>
            <input type="text" class="form-control" placeholder="搜索关键字" v-model="keyword">
        </form>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Brand Name</th>
                    <th>Create Time</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in search()" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(item.id)">删除</button>
                    </td>
                </tr> 
            </tbody>
        </table>
    </div>

    <script>

        //只要有数据发生变化，页面中的指令就会被重新解析

        //v-for="(item, index) in search()"

        //1. 当我们在页面刚加载的时候，this.keyword是一个空字符串
        //2. 由于所有字符串中都包含空字符串，那search函数返回的结果就是数组中所有的项
        //3. 页面中展示的就是数组中所有的项
        
        //4. 当我们在搜索框中输入内容的时候
        //5. 由于搜索框和keyword是双向绑定的，那么keyword就发生了变化
        //6. 只要有数据发生变化，页面中的指令就会被重新解析
        //7. v-for又被重新解析了一次
        //8. search方法由被重新执行了一次，获取到了新的搜索结果


        //1. 创建vue对象
        var vm = new Vue({
            el: "#app",
            data: {
                brandName: "",
                brandsList: [
                    { id: 0, name: "布加迪", ctime: new Date() },
                    { id: 1, name: "比亚迪", ctime: new Date() },
                    { id: 2, name: "帕加尼", ctime: new Date() },
                    { id: 3, name: "迈巴赫", ctime: new Date() },
                    { id: 4, name: "迈凯伦", ctime: new Date() }
                ],
                keyword: ""
            },
            methods: {
                add: function () {
                    //1. 获取用户输入的内容
                    //在vue中获取页面中用户输入的内容： 数据绑定

                    //一定要记得，双向绑定就可以获取用户输入！！
                    // alert(this.brandName);

                    //2. 创建一个对象
                    var brand = {
                        id: this.brandsList.length > 0 ? this.brandsList[this.brandsList.length - 1].id + 1 : 0,
                        name: this.brandName,
                        ctime: new Date()
                    }
                    //3. 将对象添加到brandsList中即可
                    this.brandsList.push(brand);
                    this.brandName = "";
                },
                del: function(id){
                    
                    //删除当前行对应的数据
                    //1. 需要知道当前行数据的id
                    // id被当做参数传进来了

                    //2. 根据id去数组里删掉对应的数据
                    //2.1 找id对应的数据
                    var brand = this.brandsList.find(function(v){
                        return v.id == id;
                    })
                    //2.2 找数据对应的索引
                    var index = this.brandsList.indexOf(brand);

                    //2.3 根据索引删除
                    this.brandsList.splice(index, 1);
                },
                search: function(){
                    // var that = this;
                    // var result = this.brandsList.filter(function(v, i){
                    //     return v.name.indexOf(that.keyword) != -1;
                    // })

                    var result = this.brandsList.filter((v, i) => 
                         v.name.indexOf(this.keyword) !== -1
                    );

                    return result;
                }
            }
        })


        //要实现搜索功能：
        //1. 考虑： 如何从数组中找出name属性中包含某个关键字的项

        // var arr = [
        //             { id: 0, name: "布加迪", ctime: new Date() },
        //             { id: 1, name: "比亚迪", ctime: new Date() },
        //             { id: 2, name: "帕加尼", ctime: new Date() },
        //             { id: 3, name: "迈巴赫", ctime: new Date() },
        //             { id: 4, name: "迈凯伦", ctime: new Date() }
        //         ]

        // var keyword = "迈";


        // var result = arr.filter(function(v, i){
        //     return v.name.indexOf(keyword) != -1;
        // })

        // console.table(result);



        //1. 需要掌握双向绑定
        //2. 需要会数组的filter方法
        //3. 需要理解数据改变页面中指令会被重新渲染的过程
        //4. 所有的字符串都包含空字符串

    </script>
</body>

</html>